<template>
   <!--直播和回看公用-->
   <div class="pop-up" :class="$store.state.isMobile ? '' : 'pc-saas-box'">
    <header class="header">
      <div class="title">
        <span class="totle">共{{ shoppingDataInfo.goods.goodsList.length }}件商品</span>
      </div>
      <div class="close" @click="close">
        <Iconfont iconClass="cha1" />
      </div>
    </header>
    <Disclaimer v-if="shoppingDataInfo.goods.enTipView" :riskTip="shoppingDataInfo.goods.riskTip"></Disclaimer>
    <div class="pop-content">
      <ul>
        <li v-for="(v, index) in shoppingDataInfo.goods.goodsList" :key='index'  @click="getGoodsRiskTip(v)">
          <div class="img-wrap">
            <img :src="`${v.imgUrl}?x-oss-process=image/resize,m_fixed,h_190,w_190`" alt="">
            <p class="badge">{{ index  + 1 }}</p>
            <div class="live-status"  v-if="v.enIntro == 1">
                <img src="@/assets/images/voice.gif" />讲解中
              </div>
          </div>         
          <div class="li-left">
            <div class="li-left-top">
              <p class="title">{{ v.title }}</p>
              <p class="sub-title">{{ v.subTitle }}</p>
              <p class="tags"><span v-for="(w,i) in  v.labelList" :key="i">{{ w }}</span></p>
            </div>            
            <div class="li-left-bottom">
              <!-- 1 实物商品 2理财产品 3虚拟商品 -->
              <template v-if="v.type === 1 ">                
                <p class="bottom-p">
                  <span class="price">{{ v.price }}<span v-if="v.priceUnit">/{{ v.priceUnit }}</span></span>
                  <span class="line-price">{{ v.priceLine }}</span>
                </p>
              </template>
              <template v-else-if="v.type === 2 ">
                <!-- 1 收益率 2 起购价 -->
                <div v-if="v.proPriceType=='1'">
                  <p class="bottom-p">
                    <!-- 收益率 -->
                    <span class="price">{{ v.proProfitRate }}</span>
                    <!-- 参考收益率和 自定义  1 不展示 2 7日年化 3 近3月年化 4近一年年化 5 成立以来年化 6 业绩比较基准 7 自定义 proProfitRef -->
                    <span class="gray-text" v-if="v.proProfitRefType!=1">{{ v.proProfitRefType | filterText(v)}}</span>
                  </p>
                </div> 
                <div v-else-if="v.proPriceType=='2'">
                  <p class="bottom-p">
                    <!-- 起购价 -->
                    <span class="price">{{ v.proPriceInit }}</span>
                    <!-- 起购价说明 -->
                    <span class="gray-text">{{ v.proPriceInitDesc }}</span>
                  </p>
                </div>               
              </template>
              <template v-else>                
                <p class="bottom-p">
                  <span class="price">{{ v.price }}</span>
                  <!-- 价格说明 -->
                  <span class="gray-text">{{ v.priceDesc }}</span>
                </p> 
              </template>             
              <p class="btn">{{  v.btnText || '购买'  }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { shoppingRiskTip, isCheckUserAuthShoppingPop ,shoppingDotNum} from '@/util/api.js'
  export default {
    props: {
      shoppingDataInfo: Object,
      videoInfo:Object, 
      roomInfo:Object,
    },
    data() {
      return {
        roomId: this.$route.params.roomid || this.$route.params.id, //房间id
        type: null,//类型: 0-直播间,1-回看
        buyRiskObj: {},//购买风险弹窗内容,
      }
    },
    created() {
      this.type = window.location.href.includes('liveRoom') ? 0 : 1
    },
    filters: {
      filterText(type,v) {
        const  yieldForm = [,,'7日年化','近3月年化','近一年年化','成立以来年化','业绩比较基准'];//收益对照表 2 7日年化 3 近3月年化 4近一年年化 5 成立以来年化 6 业绩比较基准 7 自定义
        const arrFilter = [2,3,4,5,6,7]
        if(arrFilter.includes(type)){
          if(type == 7){
            return v.proProfitRef
          }else{
            return  yieldForm[type]
          }       
        }else{
          return ''   
        }  
      }
    },
    methods: {
          //购买风险弹窗内容
    async getGoodsRiskTip(item) {
       //打点
        const {id} = item ;
        //goods:{商品ID}:{type,1-直播,2-回看}:{roomId/videoId}
        const params = {
          'id':`goods:${id}:${window.location.href.includes('liveRoom') ? 1 : 2}:${this.$route.params.roomid ||this.$route.params.id}`,
          'plat': fun.getPlatform()
        }
        shoppingDotNum(params)
      try {
        const msgData = await shoppingRiskTip(this.roomId, this.type)
        //enPopUpWin 是否需要验证
        const { code, data } = msgData.data;
        if (code === '000000') {
          if (data) {
            const buyRiskObj = data;
            const { enPopUpWin } = data;
            if (enPopUpWin) {//true 开
              //查询是否授权过
              const msg = await isCheckUserAuthShoppingPop(this.roomId, this.type);
              const { code, data } = msg.data
              if (code === '000000') {
                if (data) {//已经授权
                  this.toOrder(item)
                } else {//未授权
                  this.$emit('formChildMsg', {
                    type: 'openBuyRisk',
                    data: { buyRiskObj, shoppingLinkInfo: {item} }
                  })
                }
              }
            } else {
              this.toOrder(item)
            }
          } else {
            this.toOrder(item)
          }
        }
      } catch (error) {

      }
    },
      // 点击商品列表里面的某个商品链接
      toOrder(item) { // id 商品id vLink 商品链接
        if (this.roomInfo) {
          // 神策打点（商品 - 直播 - button - 横屏/竖屏）
          const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
          $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
            page_name: `直播${['预告', '详情'][roomStatus]}页`,
            user_nickname: this.$store.state.userInfo.nickname,
            live_room_id: roomId,
            live_room_name: title,
            live_room_status: ['预告', '直播中'][roomStatus],
            live_room_creator: anchor,
            function_name: '点击购买',
          });
        } else {
          // 神策打点（商品 - 回看 - button - 横屏/竖屏）
          const { title, creator } = this.videoInfo.videoInfo;
          $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
            page_name: `回看详情页`,
            user_nickname: this.$store.state.userInfo.nickname,
            live_room_id: this.$route.params.id,
            live_room_name: title,
            live_room_status: '回看',
            live_room_creator: creator,
            function_name: '点击购买',
          });
        }
        fun.shoppingLink(item)
      },
      close() {
        this.$emit('formChildMsg', {
          type: 'footerVantPopClose',
          data: 'ruan'
        })
      }
    },
  };
</script>
<style scoped lang="less">
  .pop-up {
  width: 100%;
  background: #fff;
  border-radius: 20px 20px 0px 0px;

  .header {
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 30px;
      font-weight: bold;
      color: #343434;
      margin-left: 30px;

      .totle {
        font-size: 30px;
        color: #FE4C53;
      }
    }
    .iconcha1 {
        padding: 0 30px;
        font-size: 18px;
        color: #c8c9cc;
      }
  }
  .pop-content {
    width: 100%;
    max-height: calc(56vh - 72px);
    overflow-y: scroll;
    ul{
      li{
        height: 255px;
        // background-color: sienna;
        // border-bottom: 2px solid skyblue;
        padding: 30px 20px;
        display: flex;
        .img-wrap{
          width: 189px;
          height: 189px;
          border-radius: 15px;
          position: relative;
          box-shadow: 0rem 0rem 1rem 1px #e8e9ed;
          overflow: hidden;
          img{
            width: 189px;
            height: 189px;
            border-radius: 15px;
          }
          .badge{
            width: 40px;
            height: 28px;
            background: rgba(0,0,0,0.4);
            font-size: 24px;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            line-height: 28px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 15px 0 0 0;
          }
          .live-status{
            width: 100%;
            height: 40px;
            background: rgba(0,0,0,0.3);
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
              width: 28px;
              height: 28px;
              margin-right: 7px;
            }
              font-size: 24px;
              font-weight: 400;
              color: #FFFFFF;
          }
        }
        .li-left{
          flex: 1;
          padding-left: 20px;
          // background-color: darkcyan;
          display: flex;
          flex-direction: column;
          .li-left-top{
            flex: 1;
            .title{
              font-size: 32px;
              font-weight: 500;
              color: #333333;
              line-height: 45px;
            }
            .sub-title{
              font-size: 24px;
              font-weight: 400;
              color: #999999;
              line-height: 33px;
              margin-top: 7px;
            }
            .tags{
              margin-top: 4px;
              span{
                height: 35px;
                padding: 0 8px;
                background:rgba(255, 173, 66, 0.15);
                border-radius: 8px;
                color: #FF9409; 
                font-size: 20px;
                line-height: 35px;
                border-radius: 8px;
              }
              
            }
          }
          .li-left-bottom{
              height: 65px;
              // background-color: darkgoldenrod;
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .bottom-p{
                width: 350px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .price{
                font-size: 32px;
                font-weight: 400;
                color: #FF0000;
              }
              .line-price{
                  font-size: 20px;
                  font-weight: 400;
                  color: #999999;
                  margin-left: 5px;
                  text-decoration: line-through;
              }
              .gray-text{
                  font-size: 20px;
                  font-weight: 400;
                  color: #999999;
                  margin-left: 5px;
              }
              .btn{
                width: 140px;
                // padding:0 24px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                font-size: 30px;
                font-weight: 500;
                color: #FF5E00;
                white-space: nowrap;
                overflow: hidden;
                border: 1px solid transparent;
                border-radius: 30px;
                background-clip: padding-box, border-box;
                background-origin: padding-box, border-box;
                background-image: linear-gradient(to right, white,white), linear-gradient(146deg,rgba(255, 163, 0, 1), rgba(255, 0, 0, 1));
              }
          }
        }
      }
    }
  }




// .list {
//   margin-bottom: 20px;
//   background: #fff;
//   display: flex;
// }

// .list-left {
//   position: relative;
//   width: 159px;
//   margin-right: 18px;
//   border-radius: 12px;
// }

// .list-left img {
//   display: block;
//   width: 159px;
//   height: 162px;
//   border-radius: 12px;
// }

// .sort {
//   width: 60px;
//   height: 40px;
//   background: rgba(0, 0, 0, 0.4);
//   border-radius: 12px 0px 0px 0px;
//   position: absolute;
//   top: 0;
//   left: 0;
//   font-size: 26px;
//   font-weight: 400;
//   color: #FFF;
//   text-align: center;
//   line-height: 40px;
// }

// .live-status {
//   position: absolute;
//   top: 120px;
//   left: 0;
//   width: 100%;
//   height: 40px;
//   line-height: 40px;
//   text-align: center;
//   background: rgba(0, 0, 0, 0.5);
//   opacity: 0.8;
//   border-radius: 0px 0px 12px 12px;
//   font-size: 26px;
//   font-weight: 400;
//   color: #FFFFFF;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   img {
//   width: 28px;
//   height: 28px;
//   margin-right: 10px;
// }

// }


// .list-right {
//   width: 480px;
//   flex: 1;
// }

// .list-wrap {
//   padding: 10px 30px 10px 50px;
// }

// .list-right-title {
//   width: 100%;
//   height: 42px;
//   line-height: 42px;
//   margin-bottom: 12px;
//   font-size: 30px;
//   font-weight: 500;
//   color: #333333;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
// }

// .list-right-botttom {
//   font-size: 28px;
//   font-weight: 500;
//   color: #FE4B52;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }

// .price {
//   width: 300px;
//   font-size: 38px;
//   color: #FF0000;
//   line-height: 40px;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;

// }

// .price span:nth-of-type(1) {
//   margin-left: 10px;
//   font-size: 24px;
//   font-weight: 500;
// }

// .list-right-botttom .buy-btn {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   padding: 9px 24px;
//   background: linear-gradient(146deg, #FFA300 0%, #FF0000 100%);
//   border-radius: 30px;
//   font-size: 30px;
//   font-weight: 500;
//   color: #FFFFFF;
// }

// .old-price {
//   position: absolute;
//   width: 159px;
//   margin-top: 20px;
//   font-size: 22px;
//   color: #999999;
//   text-decoration: line-through;
//   line-height: 24px;
//   vertical-align: middle;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
//   text-align: center;
// }

// .des-content {
//   width: calc(100% -100px);
//   height: 37px;
//   line-height: 37px;
//   margin-bottom: 12px;
//   font-size: 26px;
//   font-weight: 400;
//   color: #999999;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
// }

// .tags-box {
//   display: flex;
//   flex-wrap: wrap;
//   margin-bottom: 26px;
//   min-height: 46px;
//   li {
//   width: fit-content;
//   padding: 10px;
//   background: rgba(255, 173, 66, 0.15);
//   border-radius: 12px;
//   font-size: 22px;
//   color: #FF9409;
//   margin-right: 10px;
// }
}
</style>
